<template>
  <div class="person fx-h-h fx-c item-c">
    <div class="avatar">
      <Avatar />
    </div>

    <el-form label-width="80px" style="width: 400px; margin: 20px 0">
      <el-form-item label="身份:" required="">
        <el-input v-model="info.identify" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户名:" required="">
        <el-input v-model="info.username"></el-input>
      </el-form-item>
      <el-form-item label="密码:" required="">
        <el-button @click="dialogVisible=true">修改密码</el-button>
      </el-form-item>
      <el-form-item>
        <el-button style="width: 320px" type="primary" @click="handleSubmit"
          >保存修改</el-button
        >
      </el-form-item>
    </el-form>
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%">
      <ChangePass @close="dialogVisible=false" />
    </el-dialog>
  </div>
</template>

<script>
import Avatar from "@/components/person/UploadAvatar.vue";
import ChangePass from '@/components/person/ChangePass'
import { warn, success, error } from "@/utils";
export default {
  data() {
    return {
        dialogVisible: false,
      prev: this.$store.state.info.username,
      info: {
        username: this.$store.state.info.username,
        identify: this.$store.state.info.role === "tch" ? "教师" : "学生",
      },
    };
  },
  components: {
    Avatar,
    ChangePass
  },
  methods: {
    /**
     * 提交
     */
    async handleSubmit() {
      if (this.prev === this.info.username)
        return warn("修改的用户名不能和原来相同");
      const res = await this.$store.dispatch(
        "changeUserInfo",
        this.info.username
      );
      if (res.code === 1) {
        success("修改用户信息成功");
      } else {
        error(res.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
